<template>
  <el-row class="ClientBox">
    <el-row class="ClientBg">
      <el-row class="ClientContent">
        <h3 class="ClientTitle">个人资料 <span class="icon">></span></h3>
        <el-row class="userPortrait">
          <el-button type="text" class="text">头像：</el-button>
          <img class="userHeader" :src="avata" alt="">
          <el-button type="text" class="edit" @click="dialogVisible = true">修改</el-button>
        </el-row>
        <el-row class="baseInfo">
          <el-col :span="7" :offset="1">
            <p>性别：{{sex[userBaseInfo.gender]}}</p>
            <p>部门名称：{{userDepartment.departmentName}}</p>
            <p>职位：{{userBaseInfo.position}}</p>
            <p>联系电话：{{userBaseInfo.username}}</p>
          </el-col>
        </el-row>
      </el-row>
    </el-row>
    <!--修改头像弹窗-->
    <el-dialog
      title="修改头像"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose">
      <el-row style="text-align: center"><img class="userHeader" :src="newAvata" alt=""></el-row>
      <el-row id="result"></el-row>
      <el-input type="file" id="file_input"  multiple @change="preViewImg" style="width: 30%" v-model="img" >重新上传</el-input>
      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false" size="small">取 消</el-button>
          <el-button type="primary" @click="saveImg" size="small">保 存</el-button>
      </span>
    </el-dialog>
  </el-row>
</template>
<script>
  import ElRow from "element-ui/packages/row/src/row";
  import  axios from  'axios';
  export default {
    components: {ElRow},
    data() {
      return {
        userBaseInfo:{},
        sex:{
          UNKNOWN: '未知',
          MALE: '男',
          FEMALE: '女'
        },
        dialogVisible: false,
        newAvata:"",
        img:"",
        userDepartment: {}
      }
    },
    methods:{
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      //图片预览
      preViewImg(){
        var that=this
        var input = document.getElementById("file_input");
        var result
        var reader = new FileReader();
        reader.readAsDataURL(input.files[0]);
        reader.onload = function (e) {
          that.newAvata=this.result
//          result = '<div id="result"><img src="' + this.result + '" alt=""/></div>';
//          div = document.createElement('div');
//          div.innerHTML = result;
//          document.getElementById('result').appendChild(div);
        }
      },
      //保存图片
      saveImg(){
        var that=this
        var formData = new FormData();
        var url="/api/account/user/logined/updateAvatar"
        formData.append('imageFiles[]', that.img)
        // 开始请求
        axios.post(url,formData,{
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'token':sessionStorage.getItem("token")
          }
        }).then(function ({data}){
          if(data.status){
            console.log(response);
            console.log(111)
            that.$message.success("保存成功");
          }else{
            that.$message.error(data.message);
          }
        })
      },
      //获取用户基本信息
      getUserInfo(){
        var that=this
        var url="/api/account/user/logined/getErpInfo"
        // 开始请求
        axios.post(url,{},{
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'token':sessionStorage.getItem("token")
          }
        }).then(function ({data}){
          if(data.status){
            that.userBaseInfo=data.data
            that.userDepartment=data.data.department
          }else{
            that.$message.error(data.message);
          }
        })
      },
    },
    //计算头像
    computed:{
      avata : function () {
        return "/api/account/avatar?userId="+localStorage.getItem("userId")
      }
    },
    created(){
      this.getUserInfo()
    },
//    beforeRouteEnter: function(to, from, next) {
//      next(vm => {
//        vm.getUserInfo();
//      });
//    }

  }

</script>

<style scoped>

  .ClientBox{
    padding: 100px 20px 10px 250px;
  }
  .ClientBg{
    background-color: white;
    box-shadow: 0 0 6px #e7e7e7;
  }
  .ClientContent{
    padding: 20px;
  }
  .ClientTitle{
    font-size: 12px;
    color: #ffa44c;
    border-bottom: 1px solid lightgray;
  }
  .icon{
    color: #777;
    margin-left: 5px;
    font-size: 15px;
  }
  .siftingBox>button{
    border: none;
  }
  .text{
    color: #777;
    font-size: 18px;
  }
  .edit{
    font-size: 18px;
  }
  .userHeader{
    height: 100px;
    width: 110px;
  }
  .userPortrait{
    margin-top: 50px;
    display: flex;
    justify-content: center;
    justify-items: center;
  }
  .baseInfo{
    margin-top: 50px;
  }
  #file_input{
    width: 30%!important;
  }
</style>
